<template>
  <div class="course" :data-courseId="courseInfo.id">
     
      <h1>{{courseInfo.title}}</h1>
      <div class="video-box">
          <img :src="courseInfo.imgUrl" alt="">
      </div>
      <div class="course-box">
          <p>简介</p>
          <div class="course-content">{{courseInfo.content}}</div>
      </div>
      <van-button round block   @click="share">分享</van-button>
  </div>
</template>

<script>

import store from '../store';
export default {
    name:'course',
    data(){
        return{
            courseInfo:{
                id:1,
                imgUrl:"",
                title:"",
                content:""
            }
        }
    },
    methods:{
    //    分享
        share(){
           
            this.$dialog.confirm({
                    title: '分享',
                    message: '课程分享：http://www.baidu.com',
                })
                .then(() => {
                    store.dispatch('updateStatus').then( res =>{
                        this.$toast({
                            type:'html',
                            message: res,
                            transition:'index-van-fade-leave-active'
                        })
                    })
                })
                .catch(() => {
                    // on cancel
            });
        }
    },
    created(){
        this.$toast.clear(true);
        const course = this.$courseData.filter((obj)=>{
            if(obj.id == this.$route.params.id ) return obj
        })[0]
        
        this.courseInfo = course
    }
}
</script>

<style lang="scss" scoped>
@function p2r($px){
    @return ($px/40px)*1rem
}
.course{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: p2r(60px) p2r(20px) p2r(160px) p2r(20px);
    box-sizing: border-box;   
    h1{
        width: 100%;
       font-size: p2r(32px);
       font-weight: bold;
    }
    .video-box{
        width: 100%;
        margin: p2r(40px) 0;
        img{
            width: 100%;
        }
    }
    .course-box{
        color: #333;
        text-align: left;
        p{
            font-size: p2r(32px);
            font-weight: bold;
            margin-bottom: p2r(30px);           
        }
        .course-content{
            font-size: p2r(28px);
            line-height: 2;
            letter-spacing: 1px;

        }
    }
    .btn{
        width: 100%;
        margin-top: p2r(30px);
    }
    
}

</style>